<template>
    <div class="addressView">
        <header>
            <van-nav-bar title="地址管理">
                <template #left>
                    <van-icon name="arrow-left" @click="$router.go(-1)" size="20" color="black" />
                </template>
            </van-nav-bar>
        </header>
        <main>
           <van-address-edit
            :area-list="areaList"
            show-postal
            show-delete
            show-set-default
            show-search-result
            :search-result="searchResult"
            :area-columns-placeholder="['请选择', '请选择', '请选择']"
            :address-info="AddressInfo"
            @save="onSave"
            @delete="onDelete"
            @change-detail="onChangeDetail"
          />
        </main>
    </div>
</template>
<style lang="stylus" scoped>
.addressView
    display flex
    flex-direction column
    height 100%
    main
        flex 1
        padding .625rem
        background rgb(247,248,250)
        .van-address-list__bottom
            bottom .625rem
            background-color rgb(247,248,250)
</style>
<script>
import Vue from 'vue'
import { AddressEdit, Toast } from 'vant'
import { areaList } from '@vant/area-data'
import { getAdd, getList, getDelete, getUpdate } from '@/api/Address'
Vue.use(AddressEdit)
Vue.use(Toast)
export default {
  data () {
    return {
      areaList,
      searchResult: [],
      userid: '',
      AddressInfo: {},
      ressId: ''
    }
  },
  methods: {
    onSave (addInfo) {
      addInfo.userid = this.userid
      if (this.ressId) {
        addInfo.addressid = this.ressId
        getUpdate(addInfo).then((res) => {
          if (res.code === '200') {
            Toast('修改成功')
            this.$router.back()
          }
        })
      } else {
        console.log(addInfo)
        getAdd(addInfo).then((res) => {
          if (res.code === '200') {
            Toast('添加成功')
            this.$router.back()
          }
        })
      }
    },
    onDelete () {
      if (this.ressId) {
        getDelete({ addressid: this.ressId }).then((res) => {
          console.log(res)
          Toast('删除成功')
          this.$router.back()
        })
      } else {
        Toast('取消添加')
        this.$router.back()
      }
    },
    onChangeDetail (val) {
      if (val) {
        this.searchResult = [
          {
            name: '黄龙万科中心',
            address: '杭州市西湖区'
          }
        ]
      } else {
        this.searchResult = []
      }
    }
  },
  mounted () {
    this.userid = this.$store.state.userId
    console.log(this.$route.params.ressid)
    this.ressId = this.$route.params.ressid ? this.$route.params.ressid : ''
    if (this.ressId) {
      getList({ params: { userid: this.userid } }).then((res) => {
        console.log(res.data)
        const index = res.data.findIndex((item) => {
          return item.addressid === this.ressId
        })
        this.AddressInfo = res.data[index]
        console.log(this.AddressInfo)
      })
    }
  }
}
</script>
